/**
  // 扩展vue原有的功能：全局组件，自定义指令，挂载原型方法，注意：没有全局过滤器。
  // 这就是插件
  // vue2.0插件写法要素：导出一个对象，有install函数，默认传入了Vue构造函数，Vue基础之上扩展
  // vue3.0插件写法要素：导出一个对象，有install函数，默认传入了app应用实例，app基础之上扩展

  // 骨架屏
  import XtxSkeleton from './xtx-skeleton.vue'

  // 录播图
  import XtxCarousel from './xtx-carousel'

  // 查看更多组件
  import XtxMore from './xtx-more'

  export default {
    install (app) {
      // 在app上进行扩展，app提供 component directive 函数
      // 如果要挂载原型 app.config.globalProperties 方式
      app.component(XtxSkeleton.name, XtxSkeleton)
      app.component(XtxCarousel.name, XtxCarousel)
      app.component(XtxMore.name, XtxMore)
    }
  }
 */
import { h, render } from 'vue'
import XtxMessage from './xtx-message.vue'
// 1.加载components下所有的vue文件
export default {
  install (app) {
    const ctx = require.context('./', false, /\.vue$/)
    // console.dir(ctx.keys())
    ctx.keys().forEach(item => {
      const component = ctx(item).default
      app.component(component.name, component)
    })

    // 指令
    // 图片懒加载指令
    app.directive('lazy', {
      mounted (el, binding) {
        const observer = new IntersectionObserver(([{ isIntersecting }]) => {
          if (isIntersecting) {
            observer.unobserve(el)
            el.onerror = () => {
              el.src = require('@/assets/images/200.png')
            }
            el.src = binding.value
          }
        },
        {
          threshold: 0.01
        }
        )
        observer.observe(el)
      }
    })

    // 增加全局方法
    app.config.globalProperties.$message = Message
  }
}

// 动态给body创建一个盒子
const div = document.createElement('div')
div.setAttribute('class', 'xtx-message-container')
document.body.appendChild(div)
export function Message ({ type, text, duration = 2000 }) {
  // 渲染XtxMessage组件
  const vNode = h(XtxMessage, { type, text })
  render(vNode, div)

  // 删除虚拟dom
  let time = null
  clearTimeout(time)
  time = setTimeout(() => {
    render(null, div)
  }, duration)
}
